<nz-breadcrumb style="margin-bottom: 5px; margin-left: 10px;">
  <nz-breadcrumb-item>
    <a routerLink="/index/index">
      <i nz-icon nzType="home"></i>
      <span>首页</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <a>
      <i nz-icon nzType="idcard"></i>
      <span>用户信息</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <span>个人中心</span>
  </nz-breadcrumb-item>
</nz-breadcrumb>
<nz-card style="min-height: 100%; padding-left: 400px;">
  <div class="left">
    <h3 style="font-weight: 700;">资料卡</h3>
    <nz-card style="width: 90%; margin-top: 21px;">
      <div nz-card-grid style="width: 100%;" [nzHoverable]="'false'">
        <div nz-row nzJustify="center" nzType="flex">
          <nz-avatar
            nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            nzShape="circle"
            [nzSize]="90"
          ></nz-avatar>
        </div>
        <div nz-row nzType="flex" nzJustify="center" style="margin: 10px 0;">
          <h2>{{loginUser.username}}</h2>
        </div>
        <div nz-row nzType="flex" nzJustify="center" style="margin: 10px 0;">
          <h4>精通全沾Java的CRUD资深程序员</h4>
        </div>
        <div nz-row nzGutter="8" style="margin: 5px 0;">
          <div nz-col nzSpan="3" nzPush="1">
            <i nz-icon nzType="user" nzTheme="outline"></i>
          </div>
          <div nz-col nzSpan="20" nzPush="1">
            <span class="inner_text">{{loginUser.username}}</span>
          </div>
        </div>
        <div nz-row style="margin: 5px 0;">
          <div nz-col nzSpan="3" nzPush="1">
            <i nz-icon nzType="bulb" nzTheme="outline"></i>
          </div>
          <div nz-col nzSpan="20" nzPush="1">
            <span class="inner_text">全沾型java人才</span>
          </div>
        </div>
        <div nz-row style="margin: 5px 0;">
          <div nz-col nzSpan="3" nzPush="1">
            <i nz-icon nzType="environment" nzTheme="outline"></i>
          </div>
          <div nz-col nzSpan="20" nzPush="1">
            <span class="inner_text">山东省 济南市</span>
          </div>
        </div>
      </div>
      <div nz-card-grid style="width: 100%;" [nzHoverable]="'false'">
        <div nz-row>
          <div nz-col nzSpan="3">
            <i nz-icon nzType="tags" nzTheme="outline"></i>
          </div>
          <nz-tag [nzColor]="'magenta'" style="margin: 5px 5px;"
            >magenta</nz-tag
          >
          <nz-tag [nzColor]="'red'" style="margin: 5px 5px;">magenta</nz-tag>
          <nz-tag [nzColor]="'orange'" style="margin: 5px 5px;">magenta</nz-tag>
          <nz-tag [nzColor]="'lime'" style="margin: 5px 5px;">magenta</nz-tag>
          <nz-tag [nzColor]="'green'" style="margin: 5px 5px;">magenta</nz-tag>
        </div>
      </div>
    </nz-card>
  </div>

  <div class="right">
    <div class="button">
      <button
        nz-button
        (click)="editInfo()"
        nzType="primary"
        *ngIf="editInfomation.state"
      >
        编辑
      </button>
      <button
        nz-button
        (click)="cancleEdit()"
        nzType="primary"
        *ngIf="!editInfomation.state"
        style="margin-right: 10px;"
      >
        取消
      </button>
      <button
        nz-button
        (click)="saveEdit()"
        nzType="primary"
        *ngIf="!editInfomation.state"
      >
        保存
      </button>
    </div>
    <nz-descriptions nzTitle="个人信息" nzBordered nzLayout="vertical">
      <nz-descriptions-item nzTitle="用户名">
        <span *ngIf="editInfomation.state">{{ loginUser.username }}</span>
        <input
          nz-input
          *ngIf="!editInfomation.state"
          nzAutosize="true"
          [(ngModel)]="loginUser.username"
        />
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="邮箱">
        <span *ngIf="editInfomation.state">{{ loginUser.email }}</span>
        <input
          nz-input
          *ngIf="!editInfomation.state"
          nzAutosize="true"
          [(ngModel)]="loginUser.email"
        />
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="手机号码">
        <span *ngIf="editInfomation.state">{{ loginUser.phone }}</span>
        <input
          nz-input
          *ngIf="!editInfomation.state"
          nzAutosize="true"
          [(ngModel)]="loginUser.phone"
        />
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="创建时间">
        2018-04-24 18:00:00
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="上次登录时间" [nzSpan]="2">
        2018-04-24 18:00:00
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="账号状态" [nzSpan]="3">
        <nz-badge nzStatus="processing" nzText="normal"></nz-badge>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="粉丝数量"
        >zhulinzhong</nz-descriptions-item
      >
      <nz-descriptions-item nzTitle="账户收益">￥20.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="账户余额">￥60.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="博客信息">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication_factor:3
        <br />
        Region: East China 1<br />
      </nz-descriptions-item>
    </nz-descriptions>
  </div>
</nz-card>
